import React, { memo } from 'react'

import { Left1Warpper } from './style'
import CustomContainerHeader from '@/components/custom-container-header'
import CustomChartBattery from '@/components/custom-chart-battery'
import Left1Icon1 from '@/assets/img/left1-icon1.png'
import Left1Icon2 from '@/assets/img/left1-icon2.png'
import Left1Icon3 from '@/assets/img/left1-icon3.png'
import Left1Icon4 from '@/assets/img/left1-icon4.png'
import Left1Icon5 from '@/assets/img/left1-icon5.png'
import Left1Icon6 from '@/assets/img/left1-icon6.png'
const Left1 = memo((props) => {
    const info = [
        { name: '在职人员', icon: Left1Icon1, value: 228876, id: 1, icon_style: { width: '32px', height: '32px' } },
        { name: '在职人员', icon: Left1Icon2, value: 2432, id: 2, icon_style: { width: '32px', height: '32px' } },
        { name: '在职人员', icon: Left1Icon3, value: 222, id: 3, icon_style: { width: '32px', height: '32px' } },
        { name: '在职人员', icon: Left1Icon4, value: 54432, id: 4, icon_style: { width: '48px', height: '40px' } },
        { name: '在职人员', icon: Left1Icon5, value: 287743, id: 5, icon_style: { width: '48px', height: '40px' } },
        { name: '在职人员', icon: Left1Icon6, value: 252549, id: 6, icon_style: { width: '48px', height: '40px' } },
    ]
    return (
        <Left1Warpper>
            <CustomContainerHeader defaultSlot="人员信息" />
            <div className="content-container">
                <div className="top-container">
                    {info?.map(item => {
                        return <div key={item.id} className='item-container'>
                            <div className="bg-box">
                                <img src={item.icon} alt="" style={{ ...item.icon_style }} />
                            </div>
                            <div className="content">
                                <span className='label'>{item.name}</span>
                                <span className='value'>{item.value}</span>
                            </div>
                        </div>
                    })}
                </div>
                <div className="chart-container">
                    <div>
                        <p className='title'>近30日项目平均考勤率</p>
                        <CustomChartBattery count={72} />
                    </div>
                    <div>
                        <p className='title'>近30日管理人员平均考勤率</p>
                        <CustomChartBattery count={64} />
                    </div>
                </div>
            </div>
        </Left1Warpper>
    )
})


export default Left1